<template>
  <div class="post">
    <Nav></Nav>

    <Content class="content demo-split">
      <div class="demo-split-pane text-left nowrap">
        <Row>
          <Col span="11">
            <Card>
              <h2>创建新话题</h2>
              <Row>
                <Col :md="4">话题标题</Col>
                <Col :md="20">
                  <Input v-model="topics.title" placeholder="请输入话题标题">
                  </Input>
                </Col>
              </Row>
              <Row>
                <Col :md="4">话题概要</Col>
                <Col :md="20">
                  <Input v-model="topics.outline" placeholder="请输入话题概要">
                  </Input>
                </Col>
              </Row>
              <Row>
                <Col :md="4">话题分类</Col>
                <Col :md="20">
                  <div>
                    <el-checkbox-group v-model="checkClasses" class="classes">
                      <el-checkbox-button
                        v-for="el in classes"
                        :label="el.cid"
                        :key="el.cid"
                        >{{ el.title }}</el-checkbox-button
                      >
                     
                    </el-checkbox-group>
                  </div>
                
                </Col>
              </Row>
              <Row>
                <Col :md="4">话题内容</Col>
                <Col :md="20">
                  <Input
                    v-model="topics.body"
                    maxlength="1000"
                    show-word-limit
                    type="textarea"
                    placeholder="请输入话题正文"
                  />
                </Col>
              </Row>
              <Row>
                <Col :md="4">图片</Col>
                <Col :md="20" class="img">
                  <SendImg @cgImg="cgImg"></SendImg>
                </Col>
              </Row>
              <Row>
                <Col :md="24">
                  <Button type="primary" long class="sub" @click="submNewCG">发布新话题</Button>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span="11" offset="2">
            <Card dis-hover>
              <p>Content of card</p>
              <p>Content of card</p>
              <p>Content of card</p>
            </Card>
          </Col>
        </Row>
      </div>
    </Content>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SendImg from "../components/SendImg.vue";
export default {
  name: "Post",
  components: {
    SendImg,
  },
  data() {
    return {
      split: 0.5,
      topics: {
        title: "",
        body: "",
        cid:"",
        imgUrl:"",
        outline:""
      },
      modal:true
    };
  },
  computed: {
    ...mapState("user", ["classes"]),
    checkClasses: {
      get() {
        return this.$store.state.user.checkClasses;
      },
      set(val) {
        this.$store.state.user.checkClasses = val;
      },
    },
  },
  methods: {
    cgImg(url){
      this.topics.imgUrl = url
      console.log(this.topics);

    },
    submNewCG(){
      this.topics.cid =this.checkClasses.join(",")
      if(!this.topics.imgUrl){
        this.$Message.error("图片未上传")
      }
      this.$artcle.createTopics(
        {
          data:this.topics
        }
      ).then(res =>{
        console.log(res);
      })
    }
  },
  beforeCreate() {
    this.$artcle.getcList().then((res) => {
      // console.log(res);
      this.$store.commit("user/getCategory", res.data);
    });
  },
};
</script>

<style lang="scss" scoped>
.post {
  .content {
    padding: 30px 45px;
  }
}
.demo-split {
  border: 1px solid #dcdee2;
}
.demo-split-pane {
  padding: 10px;
}
.ivu-col-span-md-4 {
  height: 40px;
  line-height: 40px;
}
.ivu-row {
  margin-top: 20px;
}
.classes {
  white-space: normal;
}
.sub {
  margin-top: 20px;
  margin-bottom: 15px;
  height: 45px;
  line-height: 45px;
}

</style>